<template>
	<view class="content">
		<view class="zhezhao" v-if="show" @click="show=false"></view>
		<view class="topbg">
			<view class="zc-card">
				<view class="zc-txt">总资产(USDT)</view>
				<view class="zc-num">
					<view class="nums">{{money}}</view>
				</view>
			</view>
			<view class="btn-group">
				<view class="btn-item" @click="gotopage('/pages/Mine/recharge/recharge')">
					<image src="../../../static/images/btn/cz.png" mode="aspectFit" class="icos"></image>
					<text class="btn-txt">充值</text>
				</view>
				<view class="btn-item" @click="gotopage('/pages/mention/mention',1)">
					<image src="../../../static/images/btn/tb.png" mode="aspectFit" class="icos"></image>
					<text class="btn-txt">提币</text>
				</view>
				<view class="btn-item" @click="gotopage('/pages/transfers/transfers',1)">
					<image src="../../../static/images/btn/hz.png" mode="aspectFit" class="icos"></image>
					<text class="btn-txt">互转</text>
				</view>
			</view>
		</view>
		<view class="zc-list">
			<view class="list-top">
				<view class="txt">历史记录</view>
				<view class="down-btn" @click="down(active)">
					<text class="down-t">{{txt}}</text>
					<u-icon name="arrow-down-fill" color="#222222" size="12"></u-icon>
				</view>
				<view class="downbody" v-if="show">
					<view class="downbg">
						<view class="down-txt" :class="{active:active==item.bill_type_id}" v-for="(item, i) in options"
							:key="item.bill_type_id" @click="chaner(item)">
							{{item.name}}
						</view>
					</view>
				</view>

			</view>
			<view class="list-item" v-for="item in list" :key="item.bill_id" v-show="list.length>0">
				<view class="info txt1">
					<text>{{item.title}}</text>
					<text>{{item.turnover}}</text>
				</view>
				<view class="info txt2">
					<text>{{item.create_time|formatDate}}</text>
					<text>余额 {{item.money_proof}}</text>
				</view>
			</view>
			<!-- <u-loadmore :status="status" /> -->
		</view>
		<u-modal v-model="is_show" @confirm="GoPwd" content="您还未设置交易码,设置后才能继续" confirm-text="去设置" show-cancel-button>
		</u-modal>
		<view class="noData" v-show="list.length<=0">
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_show: false,
				money: 0,
				list: [],
				status: 'loadmore',
				show: false,
				isShow:false,
				page: 1,
				txt: '全部',
				active: 0,
				options: [{
					bill_type_id: 0,
					name: '全部'
				}], //分类
				userInfo: {},
			};
		},
		onPullDownRefresh() {
			this.options = [{
				bill_type_id: 0,
				name: '全部'
			}]
			this.getClass()
			this.page = 1
			this.getlist(this.page)
		},
		onReachBottom() {
			// if (this.page >= 3) return;
			// this.status = 'loading';
			// this.page = ++this.page;
			// setTimeout(() => {
			// 	this.list += 10;
			// 	if (this.page >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 2000);
		},
		onLoad(e) {
			if (e.money) {
				this.money = e.money
			}
			if(e.type){
				this.active = e.type
			}
			try {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					console.log('当前数据------', userInfo);
					if (userInfo) {
						this.userInfo = userInfo
					}
				}
			} catch (e) {
				// error
			}
			this.options = [{
				bill_type_id: 0,
				name: '全部'
			}]
			this.getClass()
			this.page = 1
			this.getlist(this.page)
		},
		onShow() {

		},
		methods: {
			//获取分类列表
			getClass() {

				this.$http({
					url: this.$api.billClassify,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						console.log('分类接口返回----------', res)
						res.data.list.forEach(item=>{
							if(item.bill_type_id == this.active){
								this.txt = item.name
							}
						})
						this.options = [
							...this.options,
							...res.data.list
						]
					},
					complete: e => {
						console.log('返回-----------', e)
						uni.hideLoading();
					}
				})
			},
			// 获取列表
			getlist(e) {
				this.$http({
					url: this.$api.billList,
					method: 'GET',
					hideLoading: true,
					data: {
						bill_type_id: this.active,
						now_page: e
					},
					success: res => {
						console.log('历史记录接口返回----------', res)

						if (this.page == 1) {
							this.list = []
						}
						if (res.data.list.length > 0) {
							this.list = this.list.concat(res.data.list)
							this.page += 1
							this.getlist(this.page)

						}
					},
					complete: e => {
						console.log('返回-----------', e)
						uni.hideLoading();
					}
				})
			},
			down(i) {
				this.show = true;
				this.active = i
			},
			gotopage(url, type = '') {
				if (type) {
					if (!this.userInfo.safety_code) {
						this.isShow = true
					} else {
						uni.navigateTo({
							url: url
						});
					}
				} else {
					uni.navigateTo({
						url: url
					});
				}
				// uni.navigateTo({
				// 	url:e
				// })
			},
			//去设置交易码
			GoPwd() {
				uni.navigateTo({
					url: '/pages/PassWord/password?type=1'
				});
			},
			chaner(i) {
				this.active = i.bill_type_id
				this.show = false
				this.txt = i.name
				this.page = 1
				this.getlist(this.page)
			}
		},
		filters: {
			//格式化日期
			formatDate(e) {
				let date = new Date(e * 1000)
				console.log(date)
				let Y = date.getFullYear()
				let M = date.getMonth() + 1
				let D = date.getDate()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				if (M < 10) {
					M = "0" + M
				}
				if (D < 10) {
					D = "0" + D
				}
				if (h < 10) {
					h = "0" + h
				}
				if (m < 10) {
					m = "0" + m
				}
				if (s < 10) {
					s = "0" + s
				}
				return `${Y}-${M}-${D} ${h}:${m}:${s}`

			}
		}
	};
</script>

<style scoped>
	page {
		overflow: hidden;
		position: relative;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #f8f8f8;
		position: relative;
	}

	.topbg {
		background: #2f73fd;
		height: 320rpx;
		width: 100%;
	}

	.zc-txt {
		font-size: 30rpx;
		color: #a8c6ff;
		line-height: 32rpx;
		margin-left: 38rpx;
		margin-top: 42rpx;
	}

	.zc-num {
		display: flex;
		justify-content: space-between;
		height: 65rpx;
		margin: 14rpx 38rpx;
		align-items: center;
	}

	.nums {
		color: #fff;
		font-size: 56rpx;
		font-weight: 600;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 42rpx 32rpx;
	}

	.btn-item {
		background: #fff;
		border-radius: 50rpx;
		padding: 14rpx;
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-txt {
		font-size: 28rpx;
		color: #131415;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin: 0 16rpx;
	}

	.icos {
		width: 30rpx;
		height: 30rpx;
	}

	.zc-list {
		width: 100%;

		background: #fff;
	}

	.list-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		background: #fff;
		padding: 0 28rpx;
		position: relative;
	}

	.txt {
		position: relative;
		font-size: 28rpx;
		font-weight: 600;
		color: #222;
		padding-left: 16rpx;
	}

	.txt::before {
		position: absolute;
		content: '';
		border-radius: 20px;
		height: 28rpx;
		width: 6rpx;
		background-color: #007aff;
		left: 0rpx;
		top: 8rpx;
	}

	.down-t {
		color: #222;
		margin-right: 5rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.list-item {
		border-top: 1px solid #f7f7fa;
		padding: 0 28rpx;
		height: 138rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.txt1 {
		font-size: 28rpx;
		font-weight: 600;
		color: #131415;
		line-height: 40rpx;
		margin-bottom: 10rpx;
	}

	.txt2 {
		font-size: 22rpx;
		font-weight: 600;
		color: #999999;
		line-height: 32rpx;
	}

	.downbody {
		/* position: fixed;
	    top: 500rpx; */
		position: absolute;
		right: 11px;
		top: 50px;
		z-index: 11;
	}

	.downbg {
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 1px 5px 10px #ccc;
		margin: 0 20rpx;

	}

	.downbg::before {
		position: absolute;
		top: -20rpx;
		right: 40rpx;
		content: '';
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 20rpx solid #fff;
	}

	.down-txt {
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #222222;
		line-height: 34rpx;
		margin: 10rpx 0;
		padding: 6rpx;
	}

	.active {
		border-radius: 16rpx;
		background: #E5E5E5;
	}

	.zhezhao {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #00000080;
		top: 0;
		z-index: 9;
	}
</style>
